<template>
	<view class="u-content">
		<view class="search">
			<view class="searchbox">
				<image src="../../static/require/search.png" mode=""></image>
				<input type="text" value="" v-model="keyWords" placeholder="输入物资名称" @confirm="search" />
			</view>
			<view class="searchbtn" @click="search">
				搜索
			</view>
		</view>
		<view class="goods">
			<view class="goodst">
				已选物资
			</view>
			<view class="goodsbox">
				<!-- 渲染 indexList中checkd为true的数据-->
				<block v-for="(item,index) in indexList" :key="index">
					<block v-for="(item2,index2) in item.data" :key="index2">
						<view v-if="item2.checked" class="goodsi">
							<text>{{item2.name}}</text>
							<image src="../../static/require/move.png" mode="" @click="removeGoods(index,index2)">
							</image>
						</view>
					</block>
				</block>
			</view>
		</view>
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item.id" />
				<view class="uni-list" v-for="(item1,index1) in item.data" :key="index1"
					@click="changeitem(index,index1)">
					<view class="img" v-if="item1.checked==true">
						<image src="../../static/require/Check.png" mode=""></image>
					</view>
					<view class="img" v-else>

					</view>
					<view class="kkk">{{item1.name}}</view>
				</view>
			</view>
		</u-index-list>
		<view class="empty">

		</view>
		<view class="submit">
			<view class="subbtn" @click="subbtn">
				<text>确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				curritem: '',
				keyWords: '',
				list: [],
				itemsNum: 0,
				// checked:false,
				indexList: [{
						id: "A",
						data: []
					},
					{
						id: "B",
						data: []
					},
					{
						id: "C",
						data: []
					},
					{
						id: "D",
						data: []
					},
					{
						id: "E",
						data: []
					},
					{
						id: "F",
						data: []
					},
					{
						id: "G",
						data: []
					},
					{
						id: "H",
						data: []
					},
					{
						id: "I",
						data: []
					},
					{
						id: "J",
						data: []
					},
					{
						id: "K",
						data: []
					},
					{
						id: "L",
						data: []
					},
					{
						id: "M",
						data: []
					},
					{
						id: "N",
						data: []
					},
					{
						id: "O",
						data: []
					},
					{
						id: "P",
						data: []
					},
					{
						id: "Q",
						data: []
					},

					{
						id: "R",
						data: []
					},
					{
						id: "S",
						data: []
					}, {
						id: "T",
						data: []
					},
					{
						id: "U",
						data: []
					},
					{
						id: "V",
						data: []
					},


					{
						id: "W",
						data: []
					},
					{
						id: "X",
						data: []
					},

					{
						id: "Y",
						data: []
					},
					{
						id: "Z",
						data: []
					},
					{
						id: '*',
						data: []
					}
				]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.list=uni.getStorageSync('list1')
			// console.log(this.list)
			this.selectMaterialList()
			
		},
		created(){
			for(let i in this.list){
				// console.log(1)
				
			for (let item in this.indexList) {
				console.log(this.indexList[item].data)
				// console.log(this.indexList[item].data)
				for (let item2 in this.indexList[item].data) {
					console.log(3)
					console.log(this.list[i].itemsName==this.indexList[item].data[item2].name)
					if (this.list[i].itemsName==this.indexList[item].data[item2].name) {
						console.log(this.indexList[item].data[item2].name)
						// let itemsName=this.indexList[item].data[item2].name
						this.indexList[item].data[item2].checked=true	
							console.log(this.indexList[item].data[item2].checked)
					}				
				}
			}
			}
		},
		watch: {
			keyWords(newVal, oldVal) {
				if ((/^\s*$/.test(newVal))) {
					this.handlingList = [];
					this.pageNum = 1;
					this.status = 'more';
					this.getItemResult();
				}
			}
		},
		methods: {
			subbtn() {
				for (let item in this.indexList) {
					// console.log(this.indexList[item].data)
					for (let item2 in this.indexList[item].data) {
						if (this.indexList[item].data[item2].checked) {
							console.log(this.indexList[item].data[item2].name)
							// let itemsName=this.indexList[item].data[item2].name
							this.list.push({
								itemsName: this.indexList[item].data[item2].name,
								// unitName:this.indexList[item].data[item2].unitName,
								itemsNum: 0,
								itemsCode: this.indexList[item].data[item2].code,
								unitCode: this.indexList[item].data[item2].unitCode,
								// checked:this.indexList[item].data[item2].checked
							})						
						}				
					}
				}
				
				uni.setStorageSync('list1', this.list);
				this.$gopage('/pages/bright/requirements')
				this.list = uni.getStorageSync('list1')
			},
			search() {
				this.selectMaterialList();
			},
			uIndexListSelect(selectList) {
				console.log("selectList=", selectList);
			},
			selectMaterialList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.status = 'loading';
				this.$ajax({
					url: '/emergency_supplies/api/gft/donation/v1/donationHelpDemand/selectMaterialList',
					method: 'POST',
					needAuth: true,
					data: {
						keyWord: this.keyWords,
					}
				}).then(res => {
					if (res.code == 200) {
						this.$set(this, 'indexList', [])
						for (let key in res.data) {
							this.indexList.push({
								id: key,
								data: res.data[key]
							})
						}
						// this.indexList[0].data = res.data.A
						// this.indexList[1].data = res.data.B
						// this.indexList[2].data = res.data.C
						// this.indexList[3].data = res.data.D
						// this.indexList[4].data = res.data.E
						// this.indexList[5].data = res.data.F
						// this.indexList[6].data = res.data.G
						// this.indexList[7].data = res.data.H
						// this.indexList[8].data = res.data.I
						// this.indexList[9].data = res.data.J
						// this.indexList[10].data = res.data.K
						// this.indexList[11].data = res.data.L
						// this.indexList[12].data = res.data.M
						// this.indexList[13].data = res.data.N
					}
				}).finally(() => {
					uni.hideLoading();
				});
			},
			removeGoods(i, j) {
				this.$set(this.indexList[i].data[j], 'checked', false);
			},
			changeitem(i, j) {
				//找到点击的那一项，然后设置它的checkd属性
				this.$set(this.indexList[i].data[j], 'checked', !this.indexList[i].data[j].checked);
			},
			checkboxChange(e) {
				var item1 = this.indexList,
					values = e.detail.value;
				for (var i = 0, lenI = item1.length; i < lenI; ++i) {
					const item = item1[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-content {}

	.uni-list {
		padding: 30rpx 30rpx;
		display: flex;

		.img {
			width: 28rpx;
			height: 20rpx;

			image {
				width: 28rpx;
				height: 20rpx;
			}
		}

		.kkk {
			border-bottom: 1px solid #f5f5f5;
			margin-left: 10rpx;
		}
	}

	.search {
		width: 100%;
		height: 100rpx;
		display: flex;
		background-color: #fe5745;
		align-items: center;
		justify-content: center;

		.searchbox {
			width: 610rpx;
			height: 66rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			// justify-content: center;
			image {
				width: 34rpx;
				height: 33rpx;
				margin-left: 30rpx;
			}
		}

		.searchbtn {
			font-size: 30rpx;
			line-height: 44rpx;
			margin-left: 20rpx;
			color: #ffffff;
		}
	}

	.goods {
		padding: 30rpx 30rpx;

		.goodst {
			font-size: 30rpx;
			line-height: 100rpx;
			color: #333333;
		}

		.goodsbox {
			display: flex;
			flex-wrap: wrap;

			.goodsi {
				box-sizing: border-box;
				width: 140rpx;
				height: 60rpx;
				border-radius: 4rpx;
				border: solid 2rpx #fe5745;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin-top: 20rpx;
				margin-left: 30rpx;

				text {
					font-size: 26rpx;
					line-height: 100rpx;
					color: #666666;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				image {
					position: absolute;
					width: 16rpx;
					height: 16rpx;
					top: -8rpx;
					right: -8rpx;
				}
			}
		}
	}

	.empty {
		width: 100%;
		height: 150rpx;
	}

	.submit {
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;

		.subbtn {
			margin: 40rpx auto;
			width: 650rpx;
			height: 80rpx;
			background-color: #fe5745;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 30rpx;
				line-height: 44rpx;
				color: #ffffff;
			}
		}
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;

		.sele {
			width: 28rpx;
			height: 20rpx;

			image {
				width: 28rpx;
				height: 20rpx;
			}
		}
	}
</style>
